<template>
  <div ref="carry3" class="traffic-ctr__interaction full-width relative-position">
    <div class="carry-img">
      <q-skeleton v-if="!isLoad" class="fit" />
      <img :src="ImgPath" alt="" class="border-8" @load="load">
    </div>
    <div class="carry-slot relative-position full-width q-pt-md">
      <div class="point-1">
        <slot name="start"></slot>
      </div>
      <div class="point-inner-0">
        <slot name="inner_0"></slot>
      </div>
      <div class="point-inner-1">
        <slot name="inner_1"></slot>
      </div>
      <div class="point-inner-2">
        <slot name="inner_2"></slot>
      </div>
      <div class="point-2">
        <slot name="end"></slot>
      </div>
    </div>
    <q-resize-observer @resize="onResize"></q-resize-observer>
  </div>
</template>

<script setup>
import { userStores } from 'stores/user-stores'
import { computed, ref } from 'vue'

const userStore = userStores()

const carry3 = ref(null)
const isLoad = ref(false)

const endRight = ref(0)
const startLeft = ref(0)
const inner0Top = ref(0)
const inner1Top = ref(0)
const inner2Top = ref(0)

const ImgPath = computed(() => `${userStore.OSSPath}/YF/PUBLIC/CARRYCTRL/Anime/1693365814619AIRSHOWER.gif`)

const load = () => {
  isLoad.value = true
}

const onResize = size => {
  const SL = size.width * 0.0707 - 100
  const ER = size.width * 0.0407 - 100

  const I0W = carry3.value.querySelector('.point-inner-0').offsetWidth / 2 + 10
  const I0L = size.width * 0.3557 - 200 - I0W

  const I1W = carry3.value.querySelector('.point-inner-1').offsetWidth / 2
  const I1L = size.width * 0.2 - I0W - I1W

  const I2W = carry3.value.querySelector('.point-inner-2').offsetWidth / 2 + 10
  const I2L = size.width * 0.1472 - I1W - I2W

  startLeft.value = SL > 0 ? SL : 0
  endRight.value = ER > 0 ? ER : 0
  if (I0L > 0) {
    inner0Top.value = 14
    inner1Top.value = I1L > 0 ? 14 : 55
  } else {
    inner0Top.value = 55
    inner1Top.value = 14
  }
  if (inner1Top.value === 55) {
    inner2Top.value = 14
  } else {
    inner2Top.value = I2L > 0 ? 14 : 55
  }
}
</script>

<style lang="scss" scoped>
.point-1 {
  position: absolute;
  left: v-bind('`${startLeft}px`');
}

.point-2 {
  position: absolute;
  right: v-bind('`${endRight}px`');
}

.point-inner-0 {
  position: absolute;
  top: v-bind('`${inner0Top}px`');
  left: 35.57%;
  transform: translateX(-50%);
}

.point-inner-1 {
  position: absolute;
  top: v-bind('`${inner1Top}px`');
  left: 55.57%;
  transform: translateX(-50%);
}

.point-inner-2 {
  position: absolute;
  top: v-bind('`${inner2Top}px`');
  left: 70.29%;
  transform: translateX(-50%);
}
</style>